<template>
  <div class="wanshan">
    <el-row>
      <el-col :span="24">编辑个人信息</el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <fileUpload
          :imageUrl="userMessage.headImag"
          @toFather="toFather"
        ></fileUpload>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">点击更换头像</el-col>
    </el-row>
    <br />
    <br />
    <el-row>
      <el-col :span="2">昵称</el-col>
      <el-col :span="22" style="text-align: right"
        >{{ userMessage.nickName
        }}<el-icon :size="16" @click="changenichen"><ArrowRight /></el-icon
      ></el-col>
    </el-row>
    <div style="background-color: cornsilk" v-if="IsChangeNichen">
      <br />
      <el-row>
        <el-col :span="24">修改昵称</el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :span="21">
          <input
            type="text"
            v-model="newName"
            style="width: 90%; height: 30px; background-color: cornsilk"
            placeholder="快填写一个独特的昵称吧!"
          />
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :span="4" @click="IsChangeNichen = !IsChangeNichen"
          >取消</el-col
        >
        <el-col
          :span="16"
          style="text-align: right"
          @click="
            ;(userMessage.nickName = newName),
              (IsChangeNichen = !IsChangeNichen)
          "
          >保存</el-col
        >
      </el-row>
    </div>

    <br />
    <br />
    <el-row>
      <el-col :span="2">ID号</el-col>
      <el-col :span="22" style="text-align: right">{{
        userMessage.userId
      }}</el-col>
    </el-row>
    <br />
    <br />
    <el-row>
      <el-col :span="2">简介</el-col>
      <el-col :span="22" style="text-align: right"
        >{{ userMessage.info
        }}<el-icon :size="16" @click="changejianji"><ArrowRight /></el-icon
      ></el-col>
    </el-row>
    <br />
    <div style="background-color: cornsilk" v-if="IsChangeJianji">
      <br />
      <br />
      <el-row>
        <el-col :span="24">修改简介</el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :span="21">
          <input
            type="text"
            v-model="newInfo"
            style="width: 90%; height: 30px; background-color: cornsilk"
            placeholder="丰富你的个人简介吧!"
          />
        </el-col>
      </el-row>
      <br />
      <br />
      <el-row>
        <el-col :span="4" @click="IsChangeJianji = !IsChangeJianji"
          >取消</el-col
        >
        <el-col
          :span="16"
          style="text-align: right"
          @click="
            ;(userMessage.info = newInfo), (IsChangeJianji = !IsChangeJianji)
          "
          >保存</el-col
        >
      </el-row>
    </div>
    <br />
    <br />
    <el-row>
      <el-col :span="2">性别</el-col>
      <el-col :span="22" style="text-align: right"
        >{{ userMessage.sex
        }}<el-icon :size="16" @click="changensex"><ArrowRight /></el-icon
      ></el-col>
    </el-row>
    <br />
    <div style="background-color: cornsilk" v-if="IsChangeSex">
      <br />
      <br />
      <el-row>
        <el-col :span="24"
          ><el-radio-group v-model="radio">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group></el-col
        >
      </el-row>
      <br />
      <el-row>
        <el-col :span="4" @click="IsChangeSex = !IsChangeSex">取消</el-col>
        <el-col :span="16" style="text-align: right" @click="saveSex"
          >保存</el-col
        >
      </el-row>
    </div>
    <br />
    <br />
    <el-row @click="selectCity">
      <el-col :span="2">城市</el-col>
      <el-col :span="22" style="text-align: right">{{
        userMessage.city
      }}</el-col>
    </el-row>
    <el-row
      ><div v-if="IsSelectCIty">
        <el-cascader
          size="large"
          :options="data.options"
          v-model="data.selectedOptions"
          @change="handleChange"
        >
        </el-cascader>
      </div>
    </el-row>
    <br />
    <br />
    <el-row>
      <el-col
        :span="2"
        @click="router.push('myMessage?userId=' + myId.query.userId)"
        >返回</el-col
      >
      <el-col :span="22" style="text-align: right" @click="saveInformation"
        >保存</el-col
      >
    </el-row>
  </div>
</template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { reactive, ref } from '@vue/reactivity'
import { onMounted } from 'vue'
import axios from 'axios'
import { provinceAndCityDataPlus, CodeToText } from 'element-china-area-data'
import { useRoute } from 'vue-router'
import router from '@/router'
import fileUpload from '../components/information/fileUpload.vue'
const userMessage = ref([])
const myId = useRoute()
onMounted(() => {
  myInfor()
})

function myInfor() {
  axios({
    url: 'http://localhost:8080/user/myinfo',
    method: 'get',
    contentType: 'application/json',
    headers: {
      token: localStorage.getItem('token')
    }
  }).then(function (res) {
    userMessage.value = res.data.data[0]
    console.log('个人信息' + JSON.stringify(userMessage.value))
  })
}
const newName = ref(userMessage.value.nickname)
const newInfo = ref(userMessage.value.info)
const IsChangeNichen = ref(false)
function saveSex() {
  if (radio.value === 1) {
    userMessage.value.sex = '男'
  } else {
    userMessage.value.sex = '女'
  }
  IsChangeSex.value = !IsChangeSex.value
}
function changenichen() {
  IsChangeNichen.value = true
}
const IsSelectCIty = ref(false)
function selectCity() {
  IsSelectCIty.value = true
}
function handleChange() {
  userMessage.value.city =
    CodeToText[data.selectedOptions[0]] + CodeToText[data.selectedOptions[1]]
  IsSelectCIty.value = false
}
const IsChangeJianji = ref(false)
function changejianji() {
  IsChangeJianji.value = true
}
const radio = ref(2)
const IsChangeSex = ref(false)
function changensex() {
  IsChangeSex.value = true
}

const data = reactive({
  options: provinceAndCityDataPlus,
  selectedOptions: []
})
const imageHead = ref('')
function toFather(index) {
  imageHead.value = index
}
function saveInformation() {
  axios({
    url: 'http://localhost:8080/user/Changemyinfo',
    method: 'post',
    contentType: 'application/json',
    headers: {
      token: localStorage.getItem('token')
    },
    data: {
      nickName: userMessage.value.nickName,
      info: userMessage.value.info,
      sex: userMessage.value.sex,
      headImag: imageHead.value,
      city: userMessage.value.city
    }
  }).then(function (res) {
    alert('个人信息' + JSON.stringify(res.data.message))
  })
}
</script>

<style lang="scss">
.wanshan {
  width: 70%;
  height: 75%;
  background-color: rgba(0, 255, 255, 0.079);
  text-align: center;
  margin-left: 300px;
}
</style>
